<template>
	<view class="home">
		<!-- <u-sticky> -->
		<view class="p-30">
			<u--input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="输入仪器名称，如介质损耗测定仪"
				border="surround" :clearable="true" v-model="form.name" @confirm="getList" @clear="onClear"></u--input>
		</view>
		<!-- </u-sticky> -->
		<view class="count m-x-30" :style="{
			backgroundImage: `url(${$TransformBase('home/bg.png')})`,
	 }">
			<view v-for="item in countList" :key="item.title">
				<view>{{item.title}}</view>
				<view class="p-y-20"><text class="num">{{count[item.key]}}</text>个</view>
			</view>
		</view>
		<view class="list p-30">
			<u-tabs :activeStyle="{color: '#3c9cff', fontWeight: 'bold'}" :list="tabs" @click="tabHandler"></u-tabs>
			<view class="flex flex_wrap justify-between">
				<view v-for="(item, index) in list" :key="index" class="list-item p-20 m-t-20"
					:class="item.statusAll!=0&&'error-border'" @click="onDetail(item)">
					<view class="status" :class="item.statusAll!='0'&&'error'">{{item.statusAll != 0?'异常':'正常'}}</view>
					<view class="name text-e">{{item.name}}</view>
					<view class="num text-e">型号规格:{{item.modelNumber}}</view>
					<view class="flex flex_wrap">
						<view v-for="(data, i) in item.iconList" :key="i" class="icon-item">
							<image :src="`/static/home/${data.img}.png`" style="width: 40rpx;height: 40rpx"></image>
							<view class="icon-name m-t-20">{{data.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loadmore" v-if="list.length">
				<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
					:nomore-text="nomoreText" />
			</view>
			<u-empty v-if="!list.length" mode="list" icon="/static/null.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	/**
		statusAll 0仪器正常 !=0 异常
		状态（status） 1:正常 2:故障 3:返场
		充电状态（statusCharge） 1:有电 2:没电
		换电状态（statusExchange） 1:已换电 2:未换电
		外借状态（statusLend） 1:非外借 2:外借
		在库状态（statusStore） 1:库里 2:出库
		// 检测这两个状态目前版本没有区别，后台状态数据是同步的
		检测状态（statusTest）  1:已检测 2:未检测
		检测超时状态（statusTestOver） 1:检测未超期 2:检测超期
	 */
	import SetTabBar from '@/mixins/SetTabBar.js'
	export default {
		mixins: [SetTabBar],
		data() {
			return {
				count: {
					all: 0,
					ex: 0,
					normal: 0
				},
				form: {
					name: '',
					limit: 10,
					order: 'asc', // 排序，asc／desc
					page: 1,
					total: 0,
					// 0是正常，大于0是异常-这里后台转了
					statusAll: 1,
				},
				countList: [{
						title: '设备总数',
						key: 'all',
					},
					{
						title: '正常设备',
						key: 'normal',
					},
					{
						title: '异常设备',
						key: 'ex',
					},
				],
				tabs: [{
						name: '正常',
						key: 'normal'
					},
					{
						name: '异常',
						key: 'abnormal'
					},
				],
				list: [],
				iconList: [{
						key: 'statusLend',
						name: '外借',
						img: 'statusLend1'
					},
					{
						key: 'statusTestOver',
						name: '送检',
						img: 'statusTest1'
					},
					{
						key: 'status',
						name: '故障',
						img: 'status1'
					},
					{
						key: 'statusCharge',
						name: '电量',
						img: 'statusCharge1'
					},
					{
						key: 'status-',
						name: '返厂',
						img: 'status4'
					},
					{
						key: 'statusTestOver',
						name: '超期',
						img: 'statusTestOver1'
					},
				]
			}
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.form.total > this.form.limit) {
				this.form.limit = this.form.limit + 10
				this.getList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.form.limit = 10
			this.getList()
		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.setTabBarIndex(1);
			// #endif
			this.getDeviceCount()
			this.getList()
		},
		methods: {
			async getDeviceCount() {
				let res = await this.$api.getDeviceCount()
				this.count = res.data
			},
			async getList() {
				this.status = 'loading';
				const res = await this.$api.getOmList(this.form, )
				this.form.total = res.data.total
				this.list = res.data.list.map(item => {
					let iconList = JSON.parse(JSON.stringify(this.iconList))
					item.iconList = iconList.map(data => {
						data.img = item[data.key] ? `${data.key}${item[data.key]}` : data.img
						if (item.status == '3' && data.key == 'status') {
							data.img = 'status2'
						}
						if (item.status == '3' && data.key == 'status-') {
							data.img = 'status-2'
						} else if (item.status != '3' && data.key == 'status-') {
							data.img = 'status-1'
						}
						if (data.key == 'statusCharge' && (item.statusExchange == 2 || item.statusCharge == 2)) {
							data.img = 'statusCharge2'
						}
						if (data.name == '送检' && item.statusTestOver == 2) {
							data.img = 'statusTest2'
						} else if (data.name == '送检' && item.statusTestOver == 1) {
							data.img = 'statusTest1'
						}
						return data
					})
					return item
				})
				this.status = this.form.total <= this.form.limit ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh();
			},
			onClear() {
				this.form.name = null
				this.getList()
			},
			tabHandler(e) {
				// statusAll 1是正常， 2是异常
				this.form.statusAll = e.index == 1 ? 2 : 1
				this.getList()
			},
			// 前往详情页面
			onDetail(item) {
				uni.navigateTo({
					url: `/pages/home/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.home {

		.u-input {
			background-color: #fff;
		}

		.list {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			box-shadow: 0rpx -8rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
			// height: 100vh;
		}

		.list-item {
			width: 40%;
			border-radius: 10rpx;
			border: 2rpx solid #09B300;
			position: relative;

			.name {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				padding-top: 10rpx;
			}

			.num {
				font-size: 24rpx;
				font-weight: 400;
				color: #59606A;
				line-height: 60rpx;
			}

			.icon-item {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 16rpx 0;
				background: #F7F9FC;
				border-radius: 5rpx;
			}

			.icon-name {
				font-size: 22rpx;
				color: #919191;
			}
		}

		.error-border {
			border: 2rpx solid #D91A1A;
		}

		.status {
			position: absolute;
			right: 0;
			top: 0;
			background: rgba(9, 179, 0, 0.1);
			border-radius: 0rpx 8rpx 0rpx 10rpx;
			color: #09B300;
			font-size: 24rpx;
			padding: 6rpx 16rpx;
		}

		.error {
			background: rgba(217, 26, 26, 0.1);
			color: #D91A1A;
		}
	}

	.count {
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #fff;
		font-size: 26rpx;
		background-size: 100% 100%;
		padding-top: 30rpx;

		.num {
			font-size: 40rpx;
			font-weight: 600;
		}
	}
</style>